<template>
  <div>
    <div class="login_box_card">
      <div class="login_box_card_title">
        神兔网络推广系统
      </div>
      <div class="login_box_card_content">
        <div class="login_logo">
          <img class="logoi" src="@/images/logo.png" alt />
        </div>
        <div class="login-form">
          <div class="login_form_title">
            <span class="login_form_title_content">账号登录</span>
          </div>
          <el-form :rules="rules" ref="loginForm" :model="loginForm">
            <el-form-item prop="userType">
              <el-radio v-model="loginForm.userType" label="1">推广商</el-radio>
              <el-radio v-model="loginForm.userType" label="2">推广员</el-radio>
            </el-form-item>
            <el-form-item prop="logid">
              <el-input v-model="loginForm.logid" :placeholder="loginForm.userType === '1'?'请输入推广商账号':'请输入推广员账号'">
                <i
                  slot="prefix"
                  class="login_icon iconfont icon-denglu-zhanghao"
                >
                </i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                @keyup.enter.native="login"
              >
                <i slot="prefix" class="login_icon iconfont icon-denglu-mima">
                </i>
              </el-input>
            </el-form-item>
            <el-form-item prop="code" style="margin-bottom: 24px;">
              <div style="height: 40px;">
                <el-input
                  size="medium"
                  style="display:inline-block; width: 180px;"
                  v-model="loginForm.code"
                  placeholder="请输入验证码"
                >
                  <i slot="prefix" class="login_icon iconfont icon-denglu-mima">
                  </i>
                </el-input>
                <div
                  style="display:inline-block;margin-left: 5px;vertical-align: top;"
                  @click="refreshCode"
                >
                  <SIdentify
                    :contentWidth="130"
                    :contentHeight="38"
                    :identifyCode="identifyCode"
                    @click="Refresh"
                  ></SIdentify>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                class="sbmit-btn1"
                type="primary"
                size="medium "
                :loading="isLogining"
                @click="login"
              >
                登录</el-button
              >
            </el-form-item>
          </el-form>
          <div class="agent">
            <el-button type="text" class="agent_btn" @click="agentLogin"
              >代理商登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SIdentify from "@com/sidentity";
import { setCookie } from "@/utils/auth";
export default {
  components: {
    SIdentify
  },
  data() {
    let validateLogin = (rule, value, callback) => {
      if (/^[0-9A-Za-z]{1,20}$/.test(value)) {
        // 修改验证规则至最低标准，正式使用时，可能需要更改
        callback();
      } else {
        callback(
          new Error("用户名格式有误")
        );
      }
    };
    let validate = (rule, value, callback) => {
      if (/[ ]/g.test(value)) {
        // 修改验证规则至最低标准，正式使用时，可能需要更改
        callback(new Error("密码格式有误，不得包含空格"));
      } else {
        // if( value.length > 20 || value.length < 6){
        //   callback(new Error("密码格式有误"))
        // }
        callback();
      }
    };
    return {
      loginForm: {
        logid: "",
        password: "",
        userType:"1"
      },
      identifyCode: "",
      identifyCodes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      isLogining: false,
      rules: {
        logid: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { validator: validateLogin, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { validator: validate, trigger: "blur" }
        ],
        userType:[
          { required: true, message: "请选择账号类型", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: this.validatePass, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.makeCode(this.identifyCodes, 4);
    this.$store.dispatch("user/checkToken");
  },
  methods: {
    validatePass(rule, value, callback) {
      if (value != this.identifyCode) {
        // this.identifyCode = "";
        // this.makeCode(this.identifyCodes, 4);
        callback(new Error("请输入正确验证码"));
      } else {
        callback();
      }
    },
    login() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          this.isLogining = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(res => {
              this.isLogining = false;
              if (res.code === 0) {
                var data = res.data
                setCookie("accesstoken", data.accesstoken);
                setCookie("refreshtoken", data.refreshtoken);
                setCookie("UserName", data.username);
                setCookie("roleType", data.suitrole);
                setCookie("userid", data.userid);
                this.$router.push("/statistics/list");
              }else{
                this.$message.error(res.message);
              }
            })
            .catch(rej => {
              this.isLogining = false;
            });
        } else {
          return false;
        }
      });
    },
    agentLogin() {
      if(process.env.VUE_APP_CURRENTMODE !== 'development'){
        window.location.href = 'http://agent.52st.com/operatorcp.do';
      }else{
        window.location.href = 'http://47.97.158.135:8300/operatorcp.do';
      }
    },
    enterUserSystem() {
      window.location = window.location.origin;
    },
    Refresh() {},
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    }
  }
};
</script>
<style lang="scss">
.login_box_card {
  width: 616px;
  height: 443px;
  position: absolute;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #fff;
  border-radius: 4px;
  transform: translateY(-60px);
  font-size: 0;
  .el-form .el-form-item {
    margin-bottom: 16px;
    .el-radio{
      margin-right: 100px;
    }
    .el-radio:last-child{
      margin: 0;
    }
  }
  .el-form .el-form-item:first-child {
    margin-bottom: 16px;
    .el-form-item__content{
      line-height: 16px;
    }
  }
  .s-canvas {
    width: 130px;
    height: 38px;
    vertical-align: top;
  }
  .login_box_card_title {
    padding: 0 24px;
    height: 72px;
    line-height: 72px;
    font-size: 24px;
    color: #0f0f0f;
    border-bottom: 1px solid #ececec;
  }
  .login_box_card_content {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    img {
      width: 175px;
      margin-top: 78px;
    }
  }
  .el-card__body {
    padding: 0;
  }
  .login-form {
    width: 320px;
    margin: 30px 0;
    overflow: hidden;
    .login_form_title {
      font-size: 18px;
      color: #0f0f0f;
      text-align: center;
      position: relative;
      padding-bottom: 24px;


      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #989898;
        left: 0;
        top: 10px;
      }
      .login_form_title_content {
        background: #fff;
        padding: 0 12px;
        z-index: 10;
        position: relative;
      }
    }
    .login_icon {
      width: 14px;
      height: 14px;
      color: rgba(51, 51, 51, 1);
      opacity: 0.5;
      margin: 0 10px;
    }
    .el-input--prefix .el-input__inner {
      padding-left: 40px;
      box-shadow: inset 0 0 0 1000px #f7f7f7 !important;
      &:focus {
        box-shadow: inset 0 0 0 1000px #fff !important;
      }
    }
    input:-internal-autofill-selected {
      box-shadow: inset 0 0 0 1000px #f7f7f7 !important;
    }
    .forget-passWord {
      float: right;
      text-decoration: underline;
    }
    .sbmit-btn1 {
      width: 100%;
      font-size: 16px;
      background-color: #a80100;
      color: #fff;
      height: 38px;
      border-color: #a80100;
      &:focus {
        background-color: #a80100;
        border-color: #a80100;
      }
      &:hover {
        background-color: #eb3737;
        border-color: #eb3737;
      }
      &:active {
        background-color: #eb3737;
        border-color: #eb3737;
      }
    }
    .agent {
      padding-top: 5px;
    }
    .agent_btn {
      color: #404040;
      font-size: 14px;
      &:hover {
        color: #A80100;
        text-decoration: underline;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 0;
    }
    .agent {
      text-align: center;
    }
    .el-form-item__error{
      padding-top:0;
    }
  }
}
</style>
